<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系我们 - 电光云</title>
  <link rel="stylesheet" href="../css/styles.css">
  <link rel="stylesheet" href="../css/trial-form.css">
  <link rel="stylesheet" href="../css/typography.css">
  <link rel="stylesheet" href="../css/mobile-nav.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script defer src="https://cloud.umami.is/script.js" data-website-id="73aa0aaa-5134-451a-a45c-eb4d3bc692bb"></script>
  <script src="../js/mobile-nav.js" defer></script>
  <!-- 响应式样式 -->
  <style>
    @media (min-width: 768px) {
      .contact-layout {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 30px !important;
      }
      .contact-info {
        flex: 0 0 40% !important;
        margin-bottom: 0 !important;
      }
      .contact-map {
        flex: 0 0 60% !important;
      }
      .contact-info > div,
      .contact-map > div {
        height: 400px !important;
      }
    }
    
    /* 表单相关样式 */
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #333;
    }
    
    .required-field {
      position: relative;
    }
    
    .required-mark {
      color: var(--error-color);
      font-size: 1.2em;
      vertical-align: middle;
    }
    
    .form-control {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 1rem;
      transition: all 0.2s ease;
      background-color: white;
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
    }
    
    .form-error {
      border-color: var(--error-color);
      background-color: #fff0f0;
    }
    
    .form-error-message {
      color: var(--error-color);
      font-size: 0.875rem;
      margin-top: 5px;
      display: block;
    }
  </style>
</head>
<body>

  <!-- Banner -->
  <section class="banner" style="height: 40vh;">
    <div class="banner-slide active" style="background-image: url('https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');"></div>
    <div class="banner-overlay"></div>
    <div class="banner-content">
      <h1>联系我们</h1>
      <p>北京电光云信息技术有限公司</p>
    </div>
  </section>

  <!-- 联系内容 -->
  <section style="padding: 60px 0; background-color: var(--white);">
    <div class="container">
      <h2 style="text-align: center; margin-bottom: 40px;">联系方式</h2>
      <!-- 联系方式和地图部分 -->
      <div class="contact-layout" style="display: flex; flex-direction: column; margin-bottom: 60px;">
        <!-- 联系方式 (左侧) -->
        <div class="contact-info" style="margin-bottom: 30px;">
          <div style="background-color: var(--light-gray); padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); height: 100%;">
            <div style="margin-bottom: 30px;">
              <p style="margin-bottom: 15px; display: flex; align-items: center;"><i class="fas fa-map-marker-alt" style="color: var(--primary-color); margin-right: 15px; width: 20px; text-align: center; font-size: 1.2rem;"></i> <span style="font-size: 1.1rem;">北京市朝阳区望京大厦A座15层</span></p>
              <p style="margin-bottom: 15px; display: flex; align-items: center;"><i class="fas fa-phone" style="color: var(--primary-color); margin-right: 15px; width: 20px; text-align: center; font-size: 1.2rem;"></i> <span style="font-size: 1.1rem;">400-118-6688</span></p>
              <p style="margin-bottom: 15px; display: flex; align-items: center;"><i class="fas fa-envelope" style="color: var(--primary-color); margin-right: 15px; width: 20px; text-align: center; font-size: 1.2rem;"></i> <span style="font-size: 1.1rem;">dgy@dghpc.com</span></p>
              <p style="display: flex; align-items: center;"><i class="fas fa-clock" style="color: var(--primary-color); margin-right: 15px; width: 20px; text-align: center; font-size: 1.2rem;"></i> <span style="font-size: 1.1rem;">7*24小时在线服务</span></p>
            </div>
          </div>
        </div>
        <!-- 图片 (右侧) -->
        <div class="contact-map">
          <div style="border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); height: 400px;">
            <img 
              src="../static/image/contact/contact-map.jpg" 
              alt="联系方式地图" 
              style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;"
            >
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 留言部分 (全宽背景) -->
  <section style="background-image: url('../static/image/contact/contact-form-bg.svg'); background-size: cover; background-position: center; padding: 60px 0;">
    <div class="container">
      <div style="max-width: 700px; margin: 0 auto;">
        <div style="margin-bottom: 40px;">
          <h2>留言</h2>
          <div style="border-bottom: 2px solid var(--primary-color); width: 80px; margin-top: 10px;"></div>
        </div>
        <form style="background-color: rgba(255, 255, 255, 0.95); padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
          <div class="form-group">
            <label for="contact-email" class="form-label required-field">联系方式 <span class="required-mark">*</span></label>
            <input type="text" id="contact-email" class="form-control" placeholder="请输入电话号码或者邮箱" required>
          </div>
          <div class="form-group">
            <label for="contact-message" class="form-label required-field">留言内容 <span class="required-mark">*</span></label>
            <textarea id="contact-message" class="form-control" placeholder="请输入留言内容" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary">提交留言</button>
        </form>
      </div>
    </div>
  </section>
  


  

  <script src="../js/app.js"></script>
  <script src="../js/trial-form.js" defer></script>
  <script src="../js/contact-form.js" defer></script>
</body>
</html>